<template>
    <div id="app">
        <!--<div>-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;APP&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;</div>
        &lt;!&ndash;{{test}}&ndash;&gt;
        &lt;!&ndash;{{count}}&ndash;&gt;
        <br>
        {{$store.state.count}}
        <br>
        <button @click="addCount">+</button>
        <button @click="removeCount">-</button>
        <br>
        <comp1></comp1>-->
        <comp-two></comp-two>
    </div>
</template>

<script>
    import comp1 from "./components/comp1.vue"

    import compTwo from "./components/compTwo.vue"

    export default {
        name: 'App',
        components: {
            comp1,
            compTwo
        },
        data(){
            return {
                count: 0,
                test: "test",
                test1: "test2",
            }
        },
        methods: {
            addCount(){
                this.$store.state.count ++
//                this.$store.commit('addCount', 1)
            },
            removeCount(){
                this.$store.state.count --
//                this.$store.commit('removeCount', 1)
            }
        }
    }

</script>

<style>
</style>
